import { useDispatch, useSelector } from 'react-redux';
import "./index.less"
import { useEffect, useState, Suspense } from "react"
import { Spin } from 'antd';
import { Outlet, useNavigate } from "react-router-dom"
import MyMenu from '@/components/menu';
import Header from '@/components/header';
import Label from '@/components/label';
import { findRoute } from "@/components/menu/config"
import {DashboardOutlined} from '@ant-design/icons';
import { handlerBread } from '@/redux/actions';


const BreadData = [{
  icon: <DashboardOutlined />,
  label: "首页",
  herf: ''
}]


export default function home() {
  const router = useNavigate()
  const dispatch = useDispatch()
  const userData = useSelector((state: any) => {
    return state.countReducer.userData
  })


  useEffect(() => {
    router("/home/Page")
    dispatch(handlerBread(BreadData))
  }, [])

  const [reload, setLoad] = useState(false)
  const [collapsed, setCollapsed] = useState(false);

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };
  const [index, setIndex] = useState(0)
  const handlerChoose = (e: number) => {
    setIndex(e)
  }
  const handlerUrl = (e: number) => {
    let Path = findRoute(e.toString() as string)
    router(Path)
  }
  const [keyPath, setKeyPath] = useState(['1'])
  const handlerLabel = (e: Array<any>) => {
    setKeyPath(e)
  }

  const handlerReload = () => {
    new Promise((res) => {
      res(setLoad(true))
    }).then(() => {
      setLoad(false)
    })
  }
  return (
    <div className='home flex'>
      <MyMenu collapsed={collapsed} handlerChoose={handlerChoose} handlerUrl={handlerUrl} keyPath={keyPath} handlerLabel={handlerLabel} />
      <div className='home_right flex_j_c'>
        <Header toggleCollapsed={toggleCollapsed} name={userData.userName} />
        <Label index={index} handlerChoose={handlerChoose} handlerUrl={handlerUrl} handlerLabel={handlerLabel} handlerReload={handlerReload} />
        <div className='home_views'>
          <Suspense fallback={<Spin className='flex_a_j loading' size="large" />}>
            {
              !reload && <Outlet />
            }
          </Suspense>
        </div>
      </div>
    </div>
  )
}